import GlobalRouterGuard from "@/views/react_router_dom/GlobalRouterGuard.tsx";
import Layout from "@/layout/layout.tsx";
import {Navigate, redirect} from "react-router-dom";
import ClassComponent from "@/views/classComponents/classParent.tsx";
import Classcomponents from "@/views/classComponents/2Class.tsx";
import UserState from "@/views/hooksComponents/useState.tsx";
import UseRef from "@/views/hooksComponents/useRef.tsx";
import UseTransition from "@/views/hooksComponents/useTransition";
import UseDefferredValue from "@/views/hooksComponents/useDefferredValue";
import UseLoaderData from "@/views/react_router_dom/UseLoaderData.tsx";
import Gouwuche from "@/views/gouwuche";
import Protals from "@/views/portal";
import AntMessage from "@/views/portal/antMessage.tsx";
import Lazy from "@/views/lazy";
import Errors from "@/views/errorBoundary/ErrorHandler.tsx";
import React from "react";
import type {RouteObject} from "react-router-dom";

declare module "react-router" {
    interface IndexRouteObject {
        meta?: {
            title: string,
            auth?: boolean
        }
    }
    interface NonIndexRouteObject {
        meta?: {
            title: string,
            auth?: boolean
        }
    }
}

export const routes: RouteObject[] = [
    {
        path: "/",
        element: <GlobalRouterGuard><Layout/></GlobalRouterGuard>,
        errorElement: <h1>全局404</h1>,
        // 全局404页面
        children: [
            {
                index: true,
                // element: <APP />,
                element:<Navigate to="/about"/> //重定向
            },
            {
                path: "about",
                element: <h1>About</h1>,
            },{
                path: "contact",
                element: <h1>Contact</h1>,
            },{
                path: "Class",
                element: React.createElement(ClassComponent)
            },{
                path: "ClassS",
                element: React.createElement(Classcomponents),
            },{
                path: "useState",
                element: <UserState />,
                children: [
                    {
                        path: "child1",
                        element: <h1>Child1</h1>,
                        meta:{title:"子路由1",auth: true}
                    },
                    {
                        path: "child2",
                        element: <h1>Child2</h1>,
                        meta: {title: "子路由2",auth: true}
                    },
                    {
                        path: "*",
                        element: <h1>局部404</h1>,
                        meta: {title: "子路由3",auth: true}
                    },
                ]
            },{
                path: "UseRef",
                element: <UseRef />,
            },{
                path: "UseTransition",
                element: <UseTransition />,
            },{
                path: "UseDefferredValue",
                element: <UseDefferredValue />,
            },{
                path: "UseLoaderData",
                element: <UseLoaderData />,
                loader: async () => {
                    const data = await fetch("https://jsonplaceholder.typicode.com/todos/1").then(res => res.json());
                    console.log(data);
                    if (data.id === 1){
                        return redirect("/login");
                    }
                    return data; 
                }
            },{
                path: "gouwuche",
                element: <Gouwuche />,
            },{
                path: "protal",
                element: <Protals />,
            },{
                path: "AntMessage",
                element: <AntMessage />,
            },{
                path: "lazy",
                element: <Lazy />,
            },{
                path: "errorBoundary",
                element: <Errors />,
            }
        ]
    }
    ]